import React from 'react';
import { Icon, Drawer } from 'antd';
import SearchSong from './SearchSong';
import Lyric from './Lyric';
import MenuContent from './MenuContent';

import './App.css';

class App extends React.Component {
  state = {
    song: null,
    currentSongId: 0,
    drawerShow: false,
  }

  handleSearchSong(song) {
    if (!song) {
      return;
    }

    if (!this.state.song || song.id !== this.state.song.id) {
      this.setState({ song, currentSongId: song.id });
      window._Music.pause();
      window._Music.src = song.url;
      window._Music.play();
    }
  }

  onDrawerClose = () => {
    this.setState({ drawerShow: false })
  }

  render() {

    return (
      <div className="App">
        <div className="title">
          <Icon type="menu" className="icon-menu" onClick={() => { this.setState({ drawerShow: true }) }}/>
          <span>Music</span>
        </div>
        <SearchSong placeholder="输入歌曲名称" style={{ width: '90%' }} onChange={(song)=>{ this.handleSearchSong(song) }}/>
        <div className="music-name">{this.state.song && this.state.song._name ? this.state.song._name : ''}</div>
        <Lyric id={this.state.currentSongId} />

        <Drawer
          placement="left"
          closable={false}
          onClose={this.onDrawerClose}
          visible={this.state.drawerShow}
        >
          <MenuContent />
        </Drawer>
      </div>
    );
  }
}

export default App;
